<template>
  <!-- 空登陆页 -->
  <!-- 密码登录 -->
  <view class='login'>
	  <image class="image_login" src="../../static/zhibo.png" mode="widthFix"></image>
  </view>
  <view  v-if="showType==0" class="loginTitle">手机号登录</view>
  <view  v-if="showType==2" class="loginTitle">手机号注册</view>
  <view v-if="showType==0">
	  <view class="account" style="margin-top: 50rpx;">
	  	   <view class="flex1  ">
	  		  <uni-icons type="staff-filled" size="25"></uni-icons>
	  	   	  <input class="input_edit" v-model="form.phone" placeholder-class="placeholder"  placeholder="请输入账号" />
	  	   </view>
	  </view>
	  <view class="account" >
	  	   <view class="flex1  ">
	  		   <uni-icons type="locked-filled" size="25"></uni-icons>
	  	   	  <input class="input_edit" :password="passwordShow" v-model="form.password" placeholder-class="placeholder"  placeholder="请输入密码" />
	  	   </view>
	  </view>
  </view>
  <!-- 验证码登录 -->
  <!-- <view v-if="showType==1">
	  <view class="account" style="margin-top: 300rpx;">
	  	   <view class="flex1  ">
	  		  <uni-icons type="staff-filled" size="25"></uni-icons>
	  	   	  <input class="input_edit" v-model="code.phone"  placeholder-class="placeholder"  placeholder="请输入账号" />
	  	   </view>
	  </view>
	  <view class="account" >
	  	   <view class="flex1  ">
	  		  <uni-icons type="locked-filled" size="25"></uni-icons>
	  	   	 <view class="flex1">
				 <input class="input_edit" placeholder-class="placeholder"  placeholder="请输入账号" />
				 <view class="code" @click="selectCodeFn" v-if="outTimeShow==false">验证码</view>
				 <view class="code" v-else>{{outTime}}</view>
			 </view>
	  	   </view>
	  </view>
   </view> -->
   
   <!-- 注册 -->
   <view style="margin-top: 50rpx;" v-if="showType==2">
	   <view class="account">
	   	   <view class="flex1">
	   		  <view class="register_label">昵称</view>
	   		  <input class="input_edit" v-model="registerForm.nickname" placeholder-class="placeholder"  placeholder="请输入昵称" />
	   	   </view>
	   </view>
	   <view class="account">
	   	   <view class="flex1">
	   	   		  <view class="register_label">手机号</view>
	   	   		  <input class="input_edit" @input="inputFn" v-model="registerForm.phone" placeholder-class="placeholder"  placeholder="请输入手机号" />
	   	   </view>
	   </view>
	   <view class="account">
	   	   <view class="flex1">
	   	   		  <view class="register_label">密码</view>
	   	   		  <input class="input_edit"  password="true" v-model="registerForm.password"  placeholder-class="placeholder"  placeholder="请输入密码" />
	   	   </view>
	   </view>
	   <view class="account">
	   	   <view class="flex1">
	   	   		  <view class="register_label">确认密码</view>
	   	   		  <input class="input_edit" @input="checkFn" v-model="registerForm.confirmPassword" placeholder-class="placeholder"  placeholder="请确认密码" />
	   	   </view>
	   </view>
	   <view class="account">
	   	   <view class="flex1">
	   	   		  <view class="register_label">验证码</view>
	   	   		 <view class="flex1">
	   				 <input class="input_edit"  v-model="registerForm.verificationCode" placeholder-class="placeholder"  placeholder="请输入账号" />
	   				 <view class="code" @click="selectCodeFn" v-if="outTimeShow==false">验证码</view>
	   				 <view class="code" v-else>已发送  {{outTime}}</view>
	   	   		  </view>
	   	   </view>
	   </view>
	   <view class="account">
	   	   <view class="flex1">
	   	   		  <view class="register_label">邀请码</view>
	   	   		  <input class="input_edit" v-model="registerForm.invitationParent" placeholder-class="placeholder"  placeholder="请确认邀请码" />
	   	   </view>
	   </view>
   </view>
   <view  class="flex2 prompt" >
	   <view @click="promptFn(0)" v-if="showType!=2 " >无账号?立即注册</view>
		<!-- <view @click="promptFn(1)" v-if="showType!=1 ">验证码登录</view> -->
		<view @click="promptFn(2)" v-if="showType!=0 ">密码登录</view>
		<view @click="backFn()" >返回上一页</view>
   </view>
   <view class="storage">
	   <checkbox-group @change="checkboxChange">
			<label>
				<checkbox value="true" :checked="checked"  />记住此账号密码
			</label>
	   	</checkbox-group>
   </view>
   <view class="add_button" @click="loginFn" v-if="showType!=2 ">登录</view>
   <view class="add_button" @click="registerFn" v-else>注册</view>
   

</template>

<script setup >
	import {
		computed,
		ref,
		reactive,
		toRefs
	} from 'vue';
  import { isEmpty } from 'lodash';
  import sheep from '@/sheep';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  
  
    const checked=ref(false)
    const state = reactive({
      code:{
		  phone:''
	  },
	  form:{
		  phone:'',
		  password:''
	  },
	  registerForm:{
		  nickname:'',
		  phone:'',
		  password:'',
		  confirmPassword:'',
		  verificationCode:'',
		  invitationParent:'',//邀请码
	  }
    }); 
	const { code,form,registerForm} = toRefs(state);
   //定义状态
    const showType=ref(0);// 0 密码登录  1 验证码登录  2 注册
	onLoad((options)=>{
		// console.log(options);
		
		console.log(uni.getStorageSync('login_account'));
		if(uni.getStorageSync('login_account')){
			form.value.phone=uni.getStorageSync('login_account').phone
			form.value.password=uni.getStorageSync('login_account').password
		}
	})
	//定义验证码的状态
	const outTimeShow=ref(false)
	//定义验证码倒计时
	const outTime=ref(10)
    const timer = ref()
	
	//定义密码是否显示
	const passwordShow=ref(true)
	
	
	
	//
    //验证码倒计时
	const selectCodeFn=()=>{
		console.log('1212');
		codeloginFn()
		outTimeShow.value=true
		timer.value=setInterval(()=>{
			if(outTime.value==0){
				clearInterval(timer.value)
				outTimeShow.value=false
				return false
			}
			outTime.value--
		},1000)
	};
	
	//选择注册还是登录
	const promptFn=(item)=>{
		console.log(item);
		if(item==0){
			showType.value=2
		}else if(item==1){
	        showType.value=1
		}else if(item==2){
			showType.value=0
			
		}
	}
	
       //获取验证码	
	  const	codeloginFn=()=>{
		  // console.log('登录');
		  console.log(code.value);
		  sheep.$api.login.code(code.value).then(res=>{
			  console.log(res);
		  })

	  }
	  //登录
	  const	loginFn=()=>{
	  		  // console.log('登录');
	  		  sheep.$api.login.loginApi(form.value).then(res=>{
	  			  console.log(res);
				  if(res.code==200){
					  uni.showToast({
					  	title:"登录成功！",
					  	icon:"success"
					  })
					  //存储token
					  uni.setStorageSync('token',res.data)
					  
					  
					 setTimeout(()=>{
						 uni.switchTab({
							  url:'/pages/index/index'
						 })
						 getUserInfo()
					 },300)
				  }
	  		  })
	  
	  }
	  //个人中心基本信息userInfo
	  
	  const getUserInfo=()=>{
		  console.log('1');
		  sheep.$store('user').getUserInfo()
		  // sheep.$api.login.userInfo().then(res=>{
			 //  console.log(res);
			 // uni.setStorageSync('appuserInfo',res.data)
		  // })
	  }
	  
	  //是否记住密码
	  const checkboxChange=(event)=>{
		  console.log(event.detail.value);
		  if(form.value.phone && form.value.password){
			  if(event.detail.value.length>0){
				  uni.setStorageSync("login_account",form.value)
			  }
		  }else{
			  uni.showToast({
				  title:'请填写账号和密码',
				  icon:"none"
			  })
		  }
	  }
	  
	  const inputFn=(item)=>{
		  console.log(item.detail.value);
		  code.value.phone=item.detail.value
		  console.log(code.value.phone);
	  }
	  //注册
	 const   registerFn=()=>{
		 console.log(registerForm.value);
		 if( !registerForm.value.nickname ||!registerForm.value.password ||!registerForm.value.phone  || !registerForm.value.verificationCode){
			
			 uni.showToast({
				 title:"请填完整的信息",
				 icon:'none'
			 })
			 return false
		 }
		 sheep.$api.login.register(registerForm.value).then(res=>{
		 	console.log(res);
			
			if(res.code==200){
				uni.showToast({
					title:"注册成功！",
					icon:"success"
				})
				
						
			}else{
				uni.showToast({
					title:"注册失败，请重新注册！",
					icon:"error"
				})
			}
			
		 })
		setTimeout(()=>{
			registerForm.value.nickname=''
			registerForm.value.phone=''
			registerForm.value.password=''
			registerForm.value.confirmPassword=''
			registerForm.value.verificationCode=''
			registerForm.value.invitationParent=''
			showType.value=0
			
		},1000)
	 }
	
	const delnum=()=>{
			 // registerForm.value.nickname='',
			 // registerForm.value.phone='',
			 // registerForm.value.password='',
			 // registerForm.value.confirmPassword='',
			 // registerForm.verificationCode='',
	}
	 //校验密码是否一致
	 const checkFn=(e)=>{
		 if(e.detail.value.length==registerForm.value.password.length){
			 if(registerForm.value.password!==e.detail.value){
				 uni.showToast({
					title:"密码不一致",
					icon:"none"
				 })
			 }
		 }
	 }
	 
	 
	 //返回上一页
	 const backFn=()=>{
		 uni.navigateBack({delta:1})
	 }
	
	
  // onLoad(async (options) => {
  //   // #ifdef H5
  //   let event = '';
  //   if (options.login_code) {
  //     event = 'login';
  //     const { error } = await sheep.$platform.useProvider().login(options.login_code);
  //     if (error === 0) {
  //       sheep.$store('user').getInfo();
  //     }
  //   }
  //   if (options.bind_code) {
  //     event = 'bind';
  //     const { error } = await sheep.$platform.useProvider().bind(options.bind_code);
  //   }

  //   // 检测H5登录回调
  //   let returnUrl = uni.getStorageSync('returnUrl');
  //   if (returnUrl) {
  //     uni.removeStorage('returnUrl');
  //     location.replace(returnUrl);
  //   } else {
  //     uni.switchTab({
  //       url: '/',
  //     });
  //   }

  //   // #endif
  // });
</script>
<style lang="scss" scoped >
	
	
   ::v-deep .uni-checkbox-input{
		border-radius: 50%;
		width:15px;
		height:15px;
	}
	
	page{
		background-color: #fff;
	}
	.flex1{
		display:flex;
		align-items: center;
	}
	.flex2{
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	.loginTitle{
		font-size: 48rpx;
		font-weight: 700;
		margin-top: 50rpx;
		padding-left: 80rpx;
	}
	.account {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		border-bottom: 2rpx solid #eee;
		margin: 0 100rpx;
	}
	.input_edit{
		width: 250rpx;	
		padding:20rpx 20rpx;
		margin-left: 20rpx;
	}
	.placeholder{
		padding-left: 5rpx;
		font-size: 26rpx;
	}
	.add_button{
		text-align: center;
		color:#fff;
		background-image: linear-gradient(130deg,#33a7d0,#3de1c6,#3cd7c9,#3ac8cb);
		margin: 20rpx 50rpx;
		padding:25rpx;
		box-shadow: 0 0 8rpx #0e5299;
	}
	
	//验证码
	.code{
		border: 2rpx solid #eee;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 15rpx;
	}
	
	//注册
	.register_label{
		font-size: 26rpx;
		width: 120rpx;
	}
	.prompt{
		padding: 50rpx 50rpx 10rpx 50rpx;
		font-size: 28rpx;
		color: #0e5299;
	}
	
	.storage{
		margin:20rpx 50rpx;
		font-size: 28rpx;
		color: #36b7cd;
	}
	.image_login{
		
		width: 200rpx;
		border-radius: 20rpx;
	}
	.login{
		margin-top: 150rpx;
		text-align: center;
	}
</style>
